
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>QuDEx Repository Tools - Collections Manager</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>
		<ol class="breadcrumb">
			<li th:text="#{breadcrumbs.process.opselection}">Repository
				operations selection</li>
			<li th:text="#{breadcrumbs.process.new-continue}">New/continue
				collection creation</li>
			<li class="active" th:text="#{breadcrumbs.process.file}">Add
				files template</li>
		</ol>
		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{fileView.column1.title}" class="panel-title">Information</h3>
					</div>
					<div class="panel-body">
						<a href="#" th:text="#{fileView.column1.link}"
							data-toggle="collapse" data-target="#divInfo">Description of
							File-level Spreadsheet (show/hide)</a>
						<div id="divInfo" class="panel-collapse collapse">
							<div class="panel-body" th:utext="#{info.spreadsheet.files}">
								<h4>More information</h4>
								<p>The Collection Level spreadsheet is used to describe
									either QuDEx collections or sub-collections.</p>
								<p>A QuDex Collection is a Fedora Object that contains
									metadata annotations to describe a Qualitative Study and also
									contains the QuDEx XML document describing all the documents
									and elements associated with this study. The XML instance is
									stored as a special data type within the object.</p>
							</div>
						</div>
						<p th:utext="#{fileView.column1.text}">
							<b>Notes</b>
						</p>
						<p th:utext="#{fileView.column1.text1}">
							<b>*</b> Specify only one collection, e.g.
							&quot;qudex:XXXYYY&quot;, where XXXYYY can be numbers and
							letters.
						</p>
						<p th:utext="#{fileView.column1.text2}">
							<b>*</b> If a collection is specified, the relationship
							information in the spreadsheet (field rel:isPartOf) will be
							ignored. In other words, all the documents described in the
							spreadsheet will be part of the selected collection or
							sub-collection.
						</p>
						<!-- AMG ADDED CANCEL FORM HERE -->
						<form id="side-form" th:action="${flowExecutionUrl}" method="post">
							<input th:value="#{process.col.column2.form.cancel}"
								data-toggle="popover"
								th:attr="data-content=#{fileView.column1.tooltip.cancel}"
								class="btn btn-danger" name="_eventId_cancel" type="submit"
								value="Cancel" />
						</form>
						<div id="error"
							th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
							<h4 th:text="#{fileView.column1.error.title}">Errors</h4>

							<font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('filesModel.spreadsheet')}"
								th:text="${message.text}" color="red">the message error</font> <font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('filesModel.collectionsIds')}"
								th:text="${message.text}" color="red">the message error</font> <font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('')}"
								th:text="${message.text}" color="red">the message error</font>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{fileView.column2.title}" class="panel-title">File-level
							Spreadsheet</h3>
					</div>
					<div class="panel-body">
						<ul id="myTab" class="nav nav-tabs">
							<li class="active"><a href="#intro"
								th:text="#{fileView.tab1}" data-toggle="tab">Introduction</a></li>
							<li><a href="#files-1" th:text="#{fileView.tab2}"
								data-toggle="tab">Template with relationships</a></li>
							<li><a href="#files-2" th:text="#{fileView.tab3}"
								data-toggle="tab">Template without relationships</a></li>
						</ul>
						<div class="tab-content">
							<p></p>
							<div class="tab-pane fade in active" id="intro">
								<p th:text="#{fileView.column2.text}">The file-level
									spreadsheet (QuDEx) contains the metadata descriptions
									associated with files to be ingested into the repository and
									that are associated with a collection/sub-collection already
									assigned in the system.</p>
								<p th:utext="#{fileView.column2.text1}">
									You can validate the file-level spreadsheet using the <a
										href="http://service.simile-widgets.org/babel/"
										target="_blank">Exhibit Babel Converter</a> before upload
								</p>
							</div>
							<div class="tab-pane fade" id="files-1">
								<div id="zip-files">
									<h4 th:text="#{fileView.column2.form.zip.title}">Upload
										ZIP files (optional)</h4>
									<form id="form-upload" th:action="${flowExecutionUrl}"
										method="post" enctype="multipart/form-data">
										<p th:utext="#{fileView.column2.form.zip.text}">
											You can upload multiple ZIP files with the data linked to the
											files described in a file-level spreadsheet. Use this feature
											only if you uploaded a ZIP file when creating the spreadsheet
											with the &quot;<b>Spreadsheet Builder</b>&quot; application.
											If this is the case, you <b>must</b> upload the same ZIP
											file(s) than when creating the spreadsheet
										</p>
										<div
											th:if="${filesModel.getZipFiles()} and ${filesModel.getZipFiles().size() > 0}">
											<div class="well">
												<ul>
													<li th:each="file, stat : ${filesModel.getZipFiles()}"><b
														th:text="#{fileView.column2.form.zip.deletename}">ZIP
															Name:</b> <span th:text="${file.getOriginalFilename()}">the
															filename</span> | <a
														th:href="@{'~' + ${flowExecutionUrl}(_eventId=deleteItem, removeElemIndex=${stat.index})}"><span
															th:text="#{fileView.column2.form.zip.deletename2}">Delete
																ZIP file</span></a></li>
												</ul>
											</div>
											<p>
												<input class="btn btn-primary" type="submit"
													th:value="#{fileView.column2.form.zip.deleteall}"
													name="_eventId_deleteFiles" value="Delete all ZIP files" />
												<input name="_eventId_uploadZip" class="btn btn-primary"
													th:value="#{fileView.column2.form.zip.uploadmore}"
													type="submit" value="Upload more ZIP Files" />
											</p>
										</div>
										<div
											th:unless="${filesModel.getZipFiles()} and ${filesModel.getZipFiles().size() > 0}">
											<input name="_eventId_uploadZip" class="btn btn-primary"
												th:value="#{fileView.column2.form.zip.upload}" type="submit"
												value="Upload ZIP File(s)" />
										</div>
									</form>
								</div>
								<br />
								<form th:if="${collectionsList.size() == 0}" id="form-file"
									th:action="${flowExecutionUrl}" class="form-horizontal"
									method="post" enctype="multipart/form-data">
									<fieldset>
										<legend th:text="#{fileView.column2.form1.title}">1.
											Uploading a file-level spreadsheet with relationships
											information</legend>
										<p th:utext="#{fileView.column2.form1.text}">
											<b><i>No collections/sub-collections available in the
													repository yet.</i></b>
										</p>
										<p th:utext="#{fileView.column2.form1.text1}">The
											repository does not contain any collection/sub-collection.
											Therefore you have to upload a collections spreadsheet first</p>
									</fieldset>

									<input name="_eventId_collection" class="btn btn-primary"
										type="submit" th:value="#{fileView.column2.form1.submit}"
										value="Go back to Collections/Sub-collections Upload" />
								</form>
								<form th:unless="${collectionsList.size() == 0}" id="form-file2"
									th:action="${flowExecutionUrl}" class="form-horizontal"
									method="post" enctype="multipart/form-data">
									<fieldset>
										<legend th:text="#{fileView.column2.form1.title}">1.
											Uploading a file-level spreadsheet with relationships
											information</legend>

										<p th:text="#{fileView.column2.form2.text}">(rel:isPartOf
											is present in the spreadsheet)</p>
										<div id="files-rel" class="form-group">
											<label class="col-md-4 control-label" for="sp-upload-1"><span
												th:text="#{process.col.column2.form.browse.label}"></span></label>
											<div class="col-md-4">
												<div class="input-group">
													<div class="input-group">
														<span class="input-group-btn"> <span
															class="btn btn-primary btn-file"> <span
																th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
																<input name="spreadsheet" id="sp-upload-1" type="file"
																class="form-control" />
														</span><input type="text" class="form-control"
															readonly="readonly" />
														</span>
													</div>
													<span th:utext="#{process.col.column2.form.browse.help}"
														class="help-block"> Select the file to upload</span>
												</div>
											</div>
											<input th:field="${filesModel.collectionsIds}" type="hidden"
												value="NOCOLLECTION" />
										</div>
										<div class="form-group">
											<label class="col-md-4 control-label" for="load"><span></span></label>
											<div class="col-md-4">
												<div class="input-group">
													<input id="load" name="_eventId_uploadRelsSp"
														class="btn btn-primary" type="submit"
														th:value="#{fileView.column2.form2.submit1}"
														value="Upload Spreadsheet" />
												</div>
											</div>
										</div>
									</fieldset>
									<br /> <input name="_eventId_collection"
										class="btn btn-primary" type="submit"
										th:value="#{fileView.column2.form2.back}"
										value="Go back to Collections/Sub-collections Upload" />
								</form>
							</div>
							<div class="tab-pane fade" id="files-2">
								<div id="zip-files">
									<h4 th:text="#{fileView.column2.form.zip.title}">Upload
										ZIP files (optional)</h4>
									<form id="form-upload" th:action="${flowExecutionUrl}"
										method="post" enctype="multipart/form-data">
										<p th:utext="#{fileView.column2.form.zip.text}">
											You can upload multiple ZIP files with the data linked to the
											files described in a file-level spreadsheet. Use this feature
											only if you uploaded a ZIP file when creating the spreadsheet
											with the &quot;<b>Spreadsheet Builder</b>&quot; application.
											If this is the case, you <b>must</b> upload the same ZIP
											file(s) than when creating the spreadsheet
										</p>
										<div
											th:if="${filesModel.getZipFiles()} and ${filesModel.getZipFiles().size() > 0}">
											<div class="well">
												<ul>
													<li th:each="file, stat : ${filesModel.getZipFiles()}"><b
														th:text="#{fileView.column2.form.zip.deletename}">ZIP
															Name:</b> <span th:text="${file.getOriginalFilename()}">the
															filename</span> | <a
														th:href="@{'~' + ${flowExecutionUrl}(_eventId=deleteItem, removeElemIndex=${stat.index})}"><span
															th:text="#{fileView.column2.form.zip.deletename2}">Delete
																ZIP file</span></a></li>
												</ul>
											</div>
											<p>
												<input class="btn btn-primary" type="submit"
													th:value="#{fileView.column2.form.zip.deleteall}"
													name="_eventId_deleteFiles" value="Delete all ZIP files" />
												<input name="_eventId_uploadZip" class="btn btn-primary"
													th:value="#{fileView.column2.form.zip.uploadmore}"
													type="submit" value="Upload more ZIP Files" />
											</p>
										</div>
										<div
											th:unless="${filesModel.getZipFiles()} and ${filesModel.getZipFiles().size() > 0}">
											<input name="_eventId_uploadZip" class="btn btn-primary"
												th:value="#{fileView.column2.form.zip.upload}" type="submit"
												value="Upload ZIP File(s)" />
										</div>
									</form>
								</div>
								<br />
								<div id="divFile">
									<div th:if="${printTree}" th:utext="${printTree.get(0)}" class="well">the
										printed tree here</div>
									<br />
									<form id="form-file3" th:action="${flowExecutionUrl}"
										method="post" enctype="multipart/form-data"
										class="form-horizontal">
										<fieldset>
											<legend th:text="#{fileView.column2.form3.title}">2.
												Uploading a files spreadsheet with NO relationships
												information</legend>
											<p th:text="#{fileView.column2.form3.text}">Upload a
												file-level spreadsheet which does not contain relationship
												information (rel:isPartOf field is not present). Instead
												choose the parent collection from the drop down list of
												Collections.</p>
											<div id="sub-col-sp" class="form-group">
												<label class="col-md-4 control-label" for="sub-col-select"><span
													th:text="#{process.col.column2.form3.select}">Parent
														collection selection</span></label>
												<div class="col-md-4">
													<div class="input-group">
														<select name="collectionsIds" class="form-control"
															onchange='javascript:sendPrintRequest("form-file3", "print", this.value);'>
															<option value="NULLVALUE">-------</option>
															<option th:value="${rootCollection}"
																th:selected="${printTree} and ${rootCollection == printTree.get(1)}"
																th:text="#{fileView.column2.form3.parent}">Parent
																collection</option>
															<option th:with="element=${actualCollection.split(';')}"
																th:each="actualCollection : ${collectionsList}"
																th:value="${element[0]}"
																th:selected="${printTree} and ${element[0] == printTree.get(1)}"
																th:text="${element[1]}"></option>
														</select>
													</div>
												</div>
											</div>
											<div id="sub-col-sp1" class="form-group">
												<label class="col-md-4 control-label" for="sp-upload-1"><span
													th:text="#{process.col.column2.form.browse.label}"></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<div class="input-group">
															<span class="input-group-btn"> <span
																class="btn btn-primary btn-file"> <span
																	th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
																	<input name="spreadsheet" id="sp-upload-4" type="file"
																	class="form-control" />
															</span><input type="text" class="form-control"
																readonly="readonly" />
															</span>
														</div>
														<span th:utext="#{process.col.column2.form.browse.help}"
															class="help-block"> Select the file to upload</span>
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-4 control-label" for="load2"><span></span></label>
												<div class="col-md-4">
													<div class="input-group">
														<input id="load2" class="btn btn-primary"
															name="_eventId_upload" type="submit"
															th:value="#{fileView.column2.form2.submit1}"
															value="Upload Spreadsheet" />
													</div>
												</div>
											</div>
										</fieldset>
										<br />
										<p>
											<input class="btn btn-primary" name="_eventId_collection"
												type="submit" th:value="#{fileView.column2.form1.submit}"
												value="Go back to Collections/Sub-collections Upload" />
										</p>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Progress Bar -->
		<div class="modal js-loading-bar">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<h4 th:text="#{fileView.progressTitle}">Loading Templates</h4>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-info" style="width: 0%;"></div>
						</div>
						<span id="pbtext" class="hide" th:text="#{fileView.pbMessage}">Loading...
							Please be patient</span> <strong><span id="pbtxt" class="hide"
							style="text-align: center; width: 100%;"
							th:text="#{fileView.pbMessage}">Loading... Please be
								patient</span></strong>
					</div>
				</div>
			</div>
		</div>
		<div id="footer" th:include="fragments/footer :: footer"></div>
		<!-- ROW -->
	</div>
	<script>
		/*http://stackoverflow.com/questions/16808205/keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload/16813902#16813902*/
		$(document).ready(
				function() {

					/*Tooltips*/
					$('[data-toggle="tooltip"]').tooltip({
						'placement' : 'top'
					});

					$('[data-toggle="popover"]').popover({
						trigger : 'hover',
						'placement' : 'top'
					});
					// Holds the internal ID of the callback interval for the progress bar
					var intervalID;

					function initProgressBar() {
						var $modal = $('.js-loading-bar'), $bar = $modal
								.find('.progress-bar');
						var is_chrome = window.chrome;
						if (is_chrome) {
							$bar.css('width', '100%');
							$bar.text($('#pbtext').text());
							$modal.modal('show');
						} else {
							$modal.modal('show');
							intervalID = setInterval(getDataFromServer, 1500);
						}
					}

					function clearTimer() {
						clearInterval(intervalID);
						console.log("Interval cleared");
					}

					/* Initiate progress bar calls */
					function getDataFromServer() {
						dwrService.getActualProgress({
							callback : getDataFromServerCallBack,
							errorHandler : function(errorString, exception) {
								console.log("Oops: " + errorString);
							}
						});
					}

					function getDataFromServerCallBack(dataFromServer) {
						// Modify Progress bar
						var $modal = $('.js-loading-bar'), $bar = $modal
								.find('.progress-bar');
						$bar.css('width', dataFromServer);
						if (dataFromServer.progress == "0%") {
							$('#pbtxt').removeClass('hide');
							$('#pbtxt').addClass('show');
						}
						//$('#pbtxt').text(dataFromServer.info);
						if (dataFromServer.progress == "100%")
							clearTimer();
					}

					$('.js-loading-bar').modal({
						backdrop : 'static',
						show : false
					});

					$('#load').click(function() {
						initProgressBar();
					});
					$('#load2').click(function() {
						initProgressBar();
					});

					$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
						//save the latest tab; use cookies if you like 'em better:
						localStorage.setItem('lastTab', $(this).attr('href'));
					});

					//go to the latest tab, if it exists:
					var lastTab = localStorage.getItem('lastTab');
					if (lastTab) {
						$('a[href=' + lastTab + ']').tab('show');
					} else {
						// Set the first tab if cookie do not exist
						$('a[data-toggle="tab"]:first').tab('show');
					}
				});
	</script>
	<!-- CONTAINER -->
</body>
</html>